<template>
    <div class="Album" @click="close">
        <swiper :options="swiperOption" ref="mySwiper" class="swiperBox">
            <!-- slides -->
            <swiper-slide v-for="(item,index) in data.list" :key="index"><img :src="item.url" /></swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" id="rePag"  slot="pagination"></div>
        </swiper>
        <el-tag class="progress">{{activeIndex}}/{{data.list.length}}</el-tag>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: 'Album',
        components: {
            swiper,
            swiperSlide
        },
        props:['data'],
        data () {
            return {
                activeIndex:1,//当前第几张图片
                //swiper配置
                swiperOption: {
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    autoplay: false,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    on: {
                        slideChangeTransitionEnd: ()=>{
                            //切换结束时，告诉我现在是第几个slide
                            this.activeIndex = this.$refs.mySwiper.swiper.realIndex + 1;
                        },
                    },
                },
            }
        },
        methods:{
            //通知父组件关闭
            close(){
                this.$emit('Call',false)
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Album{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: auto;
        background-color: rgba(0,0,0,1);
        z-index: 100;
        .swiperBox{
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: auto;
            transform: translateY(-50%);
        }
        img{
            width: 6.4rem;
            height: 6.4rem;
        }
        /*进度*/
        .progress{
            width: 1rem;
            position: absolute;
            top: .4rem;
            left: calc(50% - .5rem);
            background: #111111;
            color: #fff;
            border-color: #111111;
            font-size: .3rem;
            letter-spacing: .02rem;
        }
    }
</style>
